<template>
  <div>
    <div class="about" v-if="!show">
      <div class="top">
        <div class="icon"></div>
        <p>更新日期: {{ getDate }}</p>
      </div>
      <section>
        <ul class="hotul">
          <RecomItem
            v-for="(item, index) in songList"
            :key="item.id"
            :item="item"
            :index="index + 1"
            @click.native="
              $emit('update:currentSong', item);
              $emit('update:playlist', songList);
            "
            :currentSong="currentSong"
            :playing="playing"
          ></RecomItem>
        </ul>
      </section>
      <div class="footer">
        <span>查看完整榜单 ></span>
      </div>
    </div>
    <LoadingView v-if="show"></LoadingView>
  </div>
</template>

<script>
import RecomItem from "@/components/RecomItem.vue";
import LoadingView from "@/components/LoadingView.vue";
export default {
  props: {
    currentSong: Object,
    playing: Boolean,
  },
  components: {
    RecomItem,
    LoadingView,
  },
  data: function () {
    return {
      songList: [],
      show:true
    };
  },
  computed: {
    getDate: function () {
      let today = new Date();
      let date = "";
      date = today.getMonth() + 1 + "月";
      date += today.getDate() + "日";
      return date;
    },
  },
  created: function () {
    this.axios
      .get("https://apis.netstart.cn/music/playlist/detail?id=3778678")
      .then((res) => {
        // console.log(res.data.playlist.tracks);
        this.songList = res.data.playlist.tracks.splice(0, 20);

        setTimeout(()=>this.show=false,100)
      });
  },
};
</script>
<style lang="less" scoped>
.about {
  width: 100%;
  height: 146px;
  background: url(../assets/hot_music_bg.jpg) center/cover;
  .top {
    width: 100%;
    height: 100%;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.2);
    .icon {
      width: 142px;
      height: 67px;
      background: url(../assets/xuebi.png) no-repeat;
      background-position: -24px -30px;
      background-size: 166px 97px;
    }
    p {
      font-size: 12px;
      margin-top: 10px;
      color: white;
    }
  }
}
.hotul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  li {
    width: 90%;
    &:nth-child(-n + 3) {
      color: #d43c33;
    }
  }
}
.footer {
  width: 100%;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  span {
    line-height: 55px;
  }
}
</style>